<template>
  <div class="page-wrapper">
    <div class="app-container">
      <!-- 页面头部 -->
      <PageHeader back-text="返回" back-type="back" :title="backupInfo.proName || '加载中...'" />

      <!-- 数据备份详情卡片 -->
      <el-card class="mb-6 backup-detail-card">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="header-icon">
                <Document />
              </el-icon>
              <span class="header-title">数据备份记录详情</span>
            </div>
            <div class="header-right">
              <ProjectStatusDisplay label="审核状态" :status-options="approval_commit_status"
                :status-value="(backupInfo as any).auditStatus || '0'" />
            </div>
          </div>
        </template>

        <!-- 数据备份信息表单（只读） -->
        <div class="backup-form-container">
          <el-form :model="backupInfo" label-width="120px" label-position="left" class="backup-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="备份人员">
                  <el-input :value="backupInfo.backupName" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备份日期">
                  <el-input :value="backupInfo.backupTime" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目名称">
                  <el-input :value="backupInfo.proName" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行总裁">
                  <el-input :value="backupInfo.proPresidentsName" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目负责人">
                  <el-input :value="backupInfo.proLeadersName" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备份时间">
                  <el-input :value="backupInfo.backupTime" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据类型">
                  <el-input :value="getDataTypeLabel(backupInfo.dataType)" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="资料名称">
                  <el-input :value="backupInfo.dataName" type="textarea" :rows="3" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备份路径">
                  <el-input :value="backupInfo.backupPath" type="textarea" :rows="3" readonly />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 检查情况编辑卡片 -->
      <el-card class="mb-6 check-case-card">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="header-icon">
                <Edit />
              </el-icon>
              <span class="header-title">检查情况编辑</span>
            </div>
            <div class="header-right">
              <el-button type="primary" @click="saveCheckCases" :loading="saveLoading">
                保存检查情况
              </el-button>
            </div>
          </div>
        </template>

        <div class="check-case-form-container">
          <el-form :model="checkCaseForm" label-width="120px" label-position="left" class="check-case-form">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="部门检查情况">
                  <el-input v-model="checkCaseForm.deptCheckCase" type="textarea" :rows="4" 
                    placeholder="请输入部门检查情况" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="公司检查情况">
                  <el-input v-model="checkCaseForm.companyCheckCase" type="textarea" :rows="4" 
                    placeholder="请输入公司检查情况" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 审核流程组件 -->
      <AuditAction :loading="auditLoading" @audit="handleAuditAction" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { getProDataBackup } from '@/api/project/backup';
import { updateProDataBackup } from '@/api/project/backup';
import type { ProDataBackupVO } from '@/api/project/backup/types';
import PageHeader from '@/views/project/components/PageHeader/index.vue';
import ProjectStatusDisplay from '@/views/project/components/ProjectStatusDisplay.vue';
import AuditAction from '@/components/AuditAction/index.vue';
import { audit } from '@/api/other/approval/index';
import type { ApprovalAuditBo } from '@/api/other/approval/types';

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { approval_commit_status, pro_data_type } = toRefs<any>(proxy?.useDict('approval_commit_status', 'pro_data_type'));

// 数据备份信息
const backupInfo = ref<ProDataBackupVO>({
  id: '',
  proId: '',
  backupBy: 0,
  backupTime: '',
  dataType: '',
  dataName: '',
  backupPath: '',
  deptCheckCase: '',
  companyCheckCase: '',
  remark: ''
} as ProDataBackupVO);
const backupLoading = ref(false);

// 检查情况表单
const checkCaseForm = ref({
  deptCheckCase: '',
  companyCheckCase: ''
});

// 保存状态
const saveLoading = ref(false);

// 审核相关
const auditLoading = ref(false);

// 备份ID
const backupId = ref<number>(Number(route.params.backupId));

/**
 * 获取数据备份详情
 */
const getBackupDetail = async () => {
  if (!backupId.value) {
    ElMessage.error('备份ID不能为空');
    return;
  }

  try {
    backupLoading.value = true;
    const res = await getProDataBackup(backupId.value);
    backupInfo.value = res.data || backupInfo.value;
    
    // 初始化检查情况表单
    checkCaseForm.value = {
      deptCheckCase: backupInfo.value.deptCheckCase || '',
      companyCheckCase: backupInfo.value.companyCheckCase || ''
    };
  } catch (error) {
    console.error('获取数据备份详情失败:', error);
    ElMessage.error('获取数据备份详情失败');
  } finally {
    backupLoading.value = false;
  }
};

/**
 * 获取数据类型标签
 */
const getDataTypeLabel = (dataType: string) => {
  if (!dataType) return '';
  const type = pro_data_type.value?.find(item => item.value === dataType);
  return type?.label || dataType;
};

/**
 * 保存检查情况
 */
const saveCheckCases = async () => {
  try {
    saveLoading.value = true;
    
    const updateData = {
      ...backupInfo.value,
      deptCheckCase: checkCaseForm.value.deptCheckCase,
      companyCheckCase: checkCaseForm.value.companyCheckCase
    };
    
    await updateProDataBackup(updateData);
    ElMessage.success('检查情况保存成功');
    
    // 重新获取最新数据
    await getBackupDetail();
  } catch (error) {
    console.error('保存检查情况失败:', error);
    ElMessage.error('保存检查情况失败');
  } finally {
    saveLoading.value = false;
  }
};

/**
 * 审核操作
 */
const handleAuditAction = (data: { status: string; idea: string }) => {
  auditLoading.value = true;
  const auditData: ApprovalAuditBo = {
    businessId: backupId.value,
    businessType: 'DATA-BACKUP-AUDIT',
    status: data.status,
    idea: data.idea
  } as ApprovalAuditBo;

  audit(auditData)
    .then(() => {
      ElMessage.success('审核成功');
      router.push('/index');
    })
    .catch(() => {
      auditLoading.value = false;
    });
};

onMounted(() => {
  getBackupDetail();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}

/* 数据备份详情卡片样式 */
.backup-detail-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  font-size: 20px;
  color: var(--el-color-primary);
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.backup-form-container {
  padding: 20px 0;
}

.backup-form {
  max-width: 100%;
}

/* 检查情况卡片样式 */
.check-case-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.check-case-form-container {
  padding: 20px 0;
}

.check-case-form {
  max-width: 100%;
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 8px;
  }

  .card-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-right {
    display: flex;
    justify-content: center;
  }
}
</style>
